<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>天天生鲜-登录</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
</head>
<body>
<div class="login_top clearfix">
    <a href="index.html" class="login_logo"></a>
</div>

<div class="login_form_bg">
    <div class="login_form_wrap clearfix">
        <div class="login_banner fl"></div>
        <div class="slogan fl">日夜兼程 · 急速送达</div>
        <div class="login_form fr">
            <div class="login_title clearfix">
                <h1>用户登录</h1>
                <a href="#">立即注册</a>
            </div>
            <div class="form_input">
                <form id="formId">
                    <input type="text" id="usernameId" name="username" class="name_input" placeholder="请输入用户名">
                    <div class="user_error">输入错误</div>
                    <input type="password" id="passwordId" name="password" class="pass_input" placeholder="请输入密码">
                    <div class="pwd_error">输入错误</div>
                    <div class="more_input clearfix">
                        <input type="checkbox" name="">
                        <label>记住用户名</label>
                        <a href="#">忘记密码</a>
                    </div>
                    <input type="button" onclick="submitForm()" name="" value="登录" class="input_submit">
                </form>
            </div>
        </div>
    </div>
</div>

<div class="footer no-mp">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888    京ICP备*******8号</p>
</div>

<script type="text/javascript" th:src="@{/jquery-2.1.4.js}"></script>
<script type="text/javascript" th:src="@{/js/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/mylayer.js}"></script>
<script>
    function submitForm() {

        //首先验证用户名和密码是不是格式符合要求
        //不符合要求直接弹出一个提示
        //符合要求在发送ajax请求到后台
        var name = $('#usernameId').val();
        console.log(name);
        if (name == undefined || name == null || name == '') {
            mylayer.errorMsg('用户名不能为空');
            return;
        }
        //用户名：4-8数字或者字母
        var regexName = /^[a-zA-Z0-9]{1,2}$/;
        if (!regexName.test(name)) {
            mylayer.errorMsg('用户名必须1-2数字或者字母');
            return;
        }

        var password = $('#passwordId').val();
        if (password == undefined || password == null || password == '') {
            mylayer.errorMsg('密码不能为空');
            return;
        }
        var regexPassword = /^[a-zA-Z0-9]{1,2}$/;
        if (!regexPassword.test(password)) {
            mylayer.errorMsg('密码是1-2位数字或者字母');
            return;
        }

        $.post(
            '/user/login',
            $('#formId').serialize(),
            function(jsonResult) {
                if (jsonResult.ok) {
                    var beforePath = '[[${session.beforePath}]]'
                    mylayer.okUrl(jsonResult.msg, beforePath);
                } else {
                    mylayer.errorMsg(jsonResult.msg);
                }
            },
            'json'
        );
    }
</script>

</body>
</html>